<template>
  <div class="common_container">
    <div class="header">
      通用配置：title、tooltip、toolbox、legend
    </div>
    <div
      ref="echart"
      class="echart_container"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let charts = this.$echarts.init(this.$refs['echart']);
      let option = {
        color: ['red', 'blue'], //设置颜色
        title: {
          //通用标题配置
          text: '成绩', //标题展示
          textStyle: {
            color: '#6a9955', //标题颜色
            fontStyle: 'normal', //标题字体【italic（斜体）,normal（通用）】
          },
          borderWidth: 1, //边框大小（单位：px）
          borderColor: 'blue', //边框颜色
          borderRadius: 5, // 统一设置四个角的圆角大小
          // borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
        },
        tooltip: {
          //通用提示配置
          show: true, //是否显示
          trigger: 'item', //触发类型【item,axis】
          triggerOn: 'mousemove', //提示框触发条件【mousemove(鼠标移入触发)、click(点击触发)】
          /*
            提示框浮层内容格式器
              折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
              散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
              地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
              饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            */
          // formatter: '{b}的{a}成绩是{c}分',// 方式一：字符串格式
          formatter: (args) => {
            // 方式二：回调函数格式
            return (
              args.name + '的' + args.seriesName + '成绩是' + args.data + '分'
            );
          },
        },
        toolbox: {
          //通用工具栏
          feature: {
            saveAsImage: {
              // 下载成图片
              type: 'png',
            },
            restore: {
              //重置功能
            },
            dataZoom: {
              //区域缩放
            },
            magicType: {
              //动态类型切换
              type: ['line', 'bar'],
            },
          },
        },
        legend: {
          //图例组件
        },
        xAxis: {
          type: 'category', //类目轴
          data: ['小明', '小青', '小红', '小智'],
        },
        yAxis: {
          type: 'value', //数值轴，不需要指定【data】
        },
        series: [
          {
            name: '语文',
            type: 'bar', //图表类型【bar,line,pie】
            data: [78, 60, 99, 55],
            markPoint: {
              // 图表标注
              data: [
                //标注的数据数组
                {
                  type: 'max',
                  name: '最大值',
                },
                {
                  type: 'min',
                  name: '最小值',
                },
              ],
            },
            markLine: {
              //图表标线
              data: [
                //标线的数据数组
                {
                  name: '平均线', // 支持 'average', 'min', 'max'
                  type: 'average',
                },
              ],
            },
            label: {
              //图形上的文本标签
              show: true, //是否展示
              position: 'inside', //展示位置【top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight】
            },
          },
          {
            name: '数学',
            type: 'bar', //图表类型【bar,line,pie】
            data: [10, 90, 50, 85],
          },
        ],
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
$echart_header_height: 50px;
.common_container {
  height: 100%;
  .header {
    height: $echart_header_height;
    padding: 5px 0;
  }
  .echart_container {
    height: calc(100% - $echart_header_height);
  }
}
</style>